<template>
  <div class="app-container search-list">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="notice-template-tab">
      <el-tab-pane :label="temp.cName" :name="temp.name" v-for="(temp, $index) in typeList" :key="$index">
        <div class="normal" v-loading="loading" style="min-height: 400px">
          <div class="list" v-if="activeName !== 'marketing'">
            <div class="list_item order_paid" v-for="(item, index) in templateList" :key="index">
              <p class="title">{{ item.noticeName }}</p>
              <p class="desc">{{ item.noticeRemark }}</p>
              <img class="img_more" :src="bagEmu[item.noticeCode]">
              <label
                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span
                  class="ant-checkbox ant-checkbox-checked">
<!--                <input type="checkbox" class="ant-checkbox-input" value="" checked="">-->
                <span
                    class="ant-checkbox-inner"></span></span><span>{{ item.noticeDetailDescribe }}</span></label>
              <div class="button__wrap">
                <div class="button__wrap">
                  <el-button @click="handleGoList(item.noticeType, item.id, item.noticeCode)"><span>模板管理</span>
                  </el-button>
                  <el-button type="primary" @click="handlePreview(item)">
                    <span>预 览</span></el-button>
                </div>
              </div>
            </div>
            <!--            <div class="list_item order_shipped"><p class="title">订单发货</p>
                          <p class="desc">邮件通知你的顾客订单已发货。如果你添加了物流单号，顾客会在这里看到它。</p>
                          <img class="img_more" src="../../../assets/images/15fa4670c01a0d3267e8e898537496e4.png">
            &lt;!&ndash;              <label
                              class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span
                              class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value=""
                                                                               checked=""><span
                              class="ant-checkbox-inner"></span></span><span>当商品发货后，更新了订单物流单号，自动发送邮件给顾客。</span></label>&ndash;&gt;
                          <div class="button__wrap_">
                            <div class="button__wrap">
                              <el-button @click="handleGoList('order_shipped')"><span>模板管理</span></el-button>
                              <el-button type="primary">
                                <span>预 览</span></el-button>
                            </div>
                          </div>
                        </div>
                        <div class="list_item order_ship_delivered"><p class="title">订单确认收货</p>
                          <p class="desc">邮件通知你的顾客，包裹已经确认收货，感谢他的购买。</p>
                          <img class="img_more" src="../../../assets/images/cd8d9857582f038af29fa5e7027c3928.png">
            &lt;!&ndash;              <label
                              class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span
                              class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value=""
                                                                               checked=""><span
                              class="ant-checkbox-inner"></span></span><span>当顾客确认收货时，自动发送邮件给顾客。</span></label>&ndash;&gt;
                          <div class="button__wrap">
                            <div class="button__wrap">
                              <el-button @click="handleGoList('order_ship_delivered')"><span>模板管理</span></el-button>
                              <el-button type="primary">
                                <span>预 览</span></el-button>
                            </div>
                          </div>
                        </div>-->
          </div>
          <div v-if="activeName === 'marketing'">
            <div class="abandoned__list_content">
              <div class="title"><p>放弃订单挽留</p>
                <p>邮件通知你的顾客订单未完成，提醒顾客继续完成购买。</p></div>
              <el-button type="primary" class="ant-btn ant-btn-primary" @click="marketingDialogVisible = true">新增营销分类
              </el-button>
            </div>
            <el-table :data="templateList" style="width: 100%">
              <el-table-column label="模板名称" prop="noticeName"></el-table-column>
              <el-table-column label="发送优惠码" prop="promotionCode">
                <template slot-scope="{row}">
                  {{ row.promotionCode || '无' }}
                </template>
              </el-table-column>
              <el-table-column label="延迟发送时间" prop="delayTime">
                <template slot-scope="{row}">
                  {{parseTime(row.delayTime)}}
                </template>
              </el-table-column>
              <el-table-column label="启用状态" prop="statusText">
                <template slot-scope="{row}">
                  <el-switch v-model="row.isEnable" active-value="0" @change="handleSpuPublish($event, row.id)"/>
                </template>
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="400">
                <template slot-scope="scope">
                  <el-button plain size="mini" type="primary" @click="handlePreview(scope.row)">预览</el-button>
                  <el-button plain size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button plain size="mini" type="danger" @click="handleDel(scope.row.id)" v-if="scope.row.noticeDetailType!== '0'">删除</el-button>
                  <el-button plain size="mini" type="primary" @click="handleGoList(scope.row.noticeType, scope.row.id, scope.row.noticeCode)">更改模板</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="邮件设置" :visible.sync="marketingDialogVisible" width="500px" center @close="handleRestForm">
      <el-form ref="marketinglForm" :model="marketing"
               :rules="checkRules" label-width="110px">
        <el-form-item label="模板名称：" prop="noticeName">
          <el-input v-model="marketing.noticeName" placeholder="请输入模板名称" maxlength="20"
                    show-word-limit clearable/>
        </el-form-item>
        <el-form-item label="选择优惠码：">
          <div class="recall">
            <div class="select">
              <el-select v-model="marketing.promotionCodeId" placeholder="优惠码" clearable>
                <el-option v-for="item in couponCodeList" :value="item.couponCodeId" :label="item.activityName"
                           :key="item.activityName"></el-option>
              </el-select>
            </div>
            <router-link :to="{name: 'coupon-codes-add'}"
                         style="margin-left: 15px;  white-space: nowrap;color: #1f7df8;">
              新建优惠码
            </router-link>
          </div>
        </el-form-item>
        <el-form-item label="延迟发送时间：">
          <el-select v-model="marketing.delayTime">
            <el-option :value="5" label="5秒"></el-option>
            <el-option :value="10" label="10秒"></el-option>
            <el-option :value="20" label="20秒"></el-option>
            <el-option :value="30" label="30秒"></el-option>
            <el-option :value="60" label="1分钟"></el-option>
            <el-option :value="5*60" label="5分钟"></el-option>
            <el-option :value="10*60" label="10分钟"></el-option>
            <el-option :value="20*60" label="20分钟"></el-option>
            <el-option :value="60*60" label="1小时"></el-option>
            <el-option :value="6*60*60" label="6小时"></el-option>
            <el-option :value="10*60*60" label="10小时"></el-option>
            <el-option :value="24*60*60" label="24小时"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
         <el-button @click="marketingDialogVisible = false;">取 消</el-button>
        <el-button type="primary" @click="saveMarketing('marketinglForm')">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog :visible.sync="isOpen" title="" :append-to-body="true"  class="custom-url" @close="isOpen=false">
      <iframe :srcdoc="showTemplateContent" frameborder="0" width="100%" height="600px"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import {
    getInformList,
    updatemarketingState,
    addMarketing,
    updateMarketing,
    deleteMarketing,
    getDefaultModels
} from '@/api/inform';
import orderPng1 from '@/assets/images/663f622862bfbe5368b80f341ef683e7.png';
import orderPng2 from '@/assets/images/15fa4670c01a0d3267e8e898537496e4.png';
import orderPng3 from '@/assets/images/cd8d9857582f038af29fa5e7027c3928.png';
import {getCouponCodeList} from '@/api/marketing';
import {deepClone} from '@/utils/utils';

export default {
    data () {
        return {
            loading: false,
            marketingDialogVisible: false,
            typeList: [
                {
                    name: 'order',
                    cName: '订单管理'
                },
                {
                    name: 'member',
                    cName: '顾客通知'
                },
                {
                    name: 'marketing',
                    cName: '营销管理'
                }
            ],
            templateList: [],
            bagEmu: {
                order_confirm: orderPng1,
                order_send_goods: orderPng2,
                order_confirm_goods: orderPng3,
                member_reset_password: 'https://cdn.shoplazzay.com/1711759867510a55n4s.png',
                marketing_return: 'https://cdn.shoplazzay.com/17117602853934jyleb.png'
            },
            dialogTableVisible: false,
            activeName: 'order',
            orderList: [],
            memberList: [],
            marketList: [],
            couponCodeList: [],
            marketing: {
                delayTime: 300
            },
            isEdit: false,
            isOpen: false,
            showTemplateContent: '',
            params: {},
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',
            checkRules: {
                noticeName: [
                    {required: true, message: '请输入模板名称', trigger: 'blur'}
                ]
            }
        };
    },
    components: {},
    mounted () {
        this.activeName = this.$route.query.type || 'order';
        this.initData(this.activeName);
    },
    methods: {
        parseTime (millisecond) {
            const hours = parseInt(((millisecond * 1000) % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = parseInt(((millisecond * 1000) % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = ((millisecond * 1000) % (1000 * 60)) / 1000;
            if (hours > 0) {
                return hours + '小时';
            }
            if (minutes > 0) {
                return minutes + '分钟';
            }
            if (seconds > 0) {
                return seconds + '秒';
            }
        },
        handleGoList (type, id, tag) {
            this.$router.push({name: 'inform-template-list', query: {emailType: type, noticeId: id, tag}});
        },
        initCouponCode () {
            getCouponCodeList({
                siteId: this.siteId
            }).then(res => {
                this.couponCodeList = res.data;
            });
        },
        initData (name) {
            this.loading = true;
            this.templateList = [];
            getInformList({siteId: this.siteId}, name).then(res => {
                this.templateList = res.data.records;
                this.loading = false;
            });
            if (name === 'marketing') {
                this.initCouponCode();
            }
        },
        handleClick (tab, event) {
            this.initData(tab.name);
        },
        handleEdit (row) {
            this.marketing = deepClone(row);
            this.marketingDialogVisible = true;
            this.isEdit = true;
        },
        handlePreview (item) {
            this.showTemplateContent = '';
            this.isOpen = true;
            getDefaultModels(this.siteId, item.id, item.noticeType).then(res => {
                this.showTemplateContent = res.data.emailModelSourceCode;
            });
        },
        handleDel (id) {
            this.$confirm('确定要删除当前类别吗？删除后该类别下的所有邮件模板都会消失哦！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMarketing(this.siteId, id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.initData(this.activeName);
                });
            }).catch(() => {
            });
        },
        saveMarketing (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    if (this.isEdit) {
                        updateMarketing({siteId: this.siteId, ...this.marketing}).then(res => {
                            this.isEdit = false;
                            this.marketingDialogVisible = false;
                            this.$message.success('修改成功');
                            this.initData(this.activeName);
                        });
                    } else {
                        addMarketing({siteId: this.siteId, ...this.marketing}).then(res => {
                            this.isEdit = false;
                            this.marketingDialogVisible = false;
                            this.$message.success('新增成功');
                            this.initData(this.activeName);
                        });
                    }
                }
            });
        },
        handleRestForm () {
            this.isEdit = false;
            this.$refs['marketinglForm'].resetFields();
            this.marketing = {
                delayTime: 300
            };
        },
        handleSpuPublish (status, id) {
            updatemarketingState({id}).then(res => {
                this.marketing = {
                    delayTime: 30 * 1000
                };
                this.$message.success('设置成功');
                this.initData(this.activeName);
            });
        }
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style scoped lang="scss">
.normal {
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;

  .list {
    display: flex;
    flex-wrap: wrap;

    .list_item {
      width: 30%;
      margin-bottom: 70px;
      margin-right: 5%;
      position: relative;
      border-radius: 8px 8px 0 0;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .title {
        font-size: 16px;
        color: #212121;
        margin-bottom: 10px;
      }

      .desc {
        font-size: 14px;
        color: #8c8c8c;
        line-height: 24px;
        margin-bottom: 15px;
        min-height: 48px;
      }

      .img_more {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 8px;
        min-width: 100%;
        min-height: 200px;
        border-top: 5px #5b99ea solid;
        box-shadow: 0 0 5px #ddd;
      }

      .button__wrap {
        display: none;
        width: 100%;
        position: absolute;
        top: 50%;
        justify-content: space-around;
      }

      &:hover .button__wrap {
        display: flex;
      }
    }

  }

  .abandoned__list_content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title p {
      color: #30354d;
      padding-bottom: 5px;
      font-size: 14px;
      line-height: 1;

      &:nth-child(2) {
        color: #7e849c;
      }
    }
  }
}
.recall{
  display: flex;
  align-items: center;
  .text{
    margin-right: 20px;
  }
}
</style>

<style lang="scss">
.notice-template-tab{
  .el-tabs__header{
    padding-left: 20px;
  }
}
</style>
